
import React from 'react';
import { withRouter } from 'react-router-dom';
import { Picker } from 'weaver-mobile';
import { SelectPage } from 'weaver-mobile-page';
import WfChooseItem from '../wf-choose-item/index';
import WfNativeRadio from './nativeRadio'
import WfNativeCheckbox from './nativeCheckbox'
import { _ } from '../../util/pcPublic';
import {controlViewPort} from './../../util/formUtil'

@withRouter
export default class WfSelect extends React.Component {
    render() {
        const { domKey, detailtype = 1, field_show_checkbox, field_show_radio,className, viewAttr, options, onChange, store, mobile_show_radio = 0 , mobile_show_checkbox = 0, fieldAttr} = this.props;
        let { value } = this.props;
        const multiChoose = detailtype === 2;
        
        if(multiChoose && (field_show_checkbox == true || (field_show_checkbox === 0 && mobile_show_checkbox == 1))){
            return (
                <WfNativeCheckbox
                    {...this.props}
                    domKey={domKey}
                    className={className}
                    viewAttr={viewAttr}
                    data={options}
                    onChange={(datas) => {
                        let valueStr = "";
                        datas && datas.map(item => {
                            if (valueStr !== "")
                                valueStr += ",";
                            valueStr += item.key;
                        });
                        onChange && onChange(valueStr);
                    }}
                    value={value}
                    supportCancel={viewAttr === 2} 
                />
            )
        }
        else if (multiChoose) {   //弹出路由选择(复选框)
            let valueArray = value.split(",");
            valueArray = valueArray.filter(v => v !== "");
            let optionArray = [];
            let showValue = [];
            options && options.map((item, index) => {
                optionArray.push({ key: item.value, showname: item.label });
                if (item.value !== "" && _.indexOf(valueArray, item.value) > -1) {
                    showValue.push(<span key={`showitem_${index}`} className="wf-field-show-item">{item.label}</span>);
                }
            });
            const el = (
                <WfChooseItem
                    domKey={domKey}
                    className={className}
                    realValue={value}
                    showValue={showValue}
                    viewAttr={viewAttr}
                    onClick={() => {
                        viewAttr > 1 && this.props.history.push(store.path);
                    }}
                />
            );
            return (
                viewAttr === 1 ? el : <SelectPage
                    multiChoose={multiChoose}
                    options={optionArray}
                    store={store}
                    valueArray={valueArray}
                    onChange={(datas) => {
                        let valueStr = "";
                        datas && datas.map(item => {
                            if (valueStr !== "")
                                valueStr += ",";
                            valueStr += item.key;
                        });
                        onChange && onChange(valueStr);
                    }}
                >{el}</SelectPage>
            )
        } else if (detailtype == 3 && (field_show_radio === true || (field_show_radio === 0 && mobile_show_radio == 1))) {
            return (
                <WfNativeRadio
                    {...this.props}
                    domKey={domKey}
                    className={className}
                    viewAttr={viewAttr}
                    data={options}
                    onChange={(data) => {
                        onChange && onChange(data);
                    }}
                    value={value}
                    supportCancel={viewAttr === 2} 
                />
            )
        } else {  //Picker下拉选择框
            let showValue = "";
            options && options.map(item => {
                if (item.value == value)
                    showValue = item.label;
            });
            if (options.length > 0 && options.filter(o => o.value == value).length == 0) {
                value="";
                onChange && onChange("");
            }
            const el = (
                <WfChooseItem
                    domKey={domKey}
                    className={className}
                    realValue={value}
                    showValue={showValue}
                    viewAttr={viewAttr}
                />
            );
            return (
                viewAttr > 1 ?
                    <Picker
                        data={options}
                        cols={1}
                        onChange={(data) => {
                            onChange && onChange(data[0]);
                        }}
                        value={[value]}
                        onVisibleChange={(visiable)=>{
                            //明细表中不用考虑缩放问题
                            const {isDetail}=fieldAttr;
                            if(isDetail)return;
                            controlViewPort('/req',visiable)
                        }}
                    >{el}</Picker>
                    : el
            )
        }
    }
}